import React from "react";
import { useStyles } from "./style";
import classNames from "classnames";
import { PRESET_ITEMS_TRANSLATION } from "../constant";
import { PresetValue } from "../type";
import { getIsoDurationInfo } from "../utils";

interface Props {
  presetItems: PresetValue[];
  relativeItems: string[];
  selectedTimeMark?: string;
  onChange: (v: string) => void;
}

function DurationItems({
  presetItems,
  relativeItems,
  selectedTimeMark,
  onChange,
}: Props) {
  const classes = useStyles();
  const itemRender = (items: string[], classnames?: any) => (
    <div className={classNames(classes.durationTimeItemsContainer, classnames)}>
      {items.map((item, idx) => {
        return (
          <span
            onClick={() => onChange(item)}
            key={`${item}-${idx}`}
            className={
              selectedTimeMark === item ? classes.selectedDuration : ""
            }
          >
            {PRESET_ITEMS_TRANSLATION[item as PresetValue] ??
              getIsoDurationInfo(item).translation}
          </span>
        );
      })}
    </div>
  );

  return (
    <div className={classes.timeItemsContainer}>
      {itemRender(relativeItems, classes.relativeDurationContainer)}
      {itemRender(presetItems)}
    </div>
  );
}

export default DurationItems;
